<template>
  <div class="BlockForms" :style="{ 'min-height': blockHeight }">
    <div class="BlockForms-gis">
      <blockGis
        ref="blockGisRef2"
        class="block-gis"
        @send-data="handleReceivedData"
        :isBack="true"
        :isEdit="isEdit"
        :isEndEdit="isEndEdit"
        :isShow="isShow"
      ></blockGis>
    </div>
    <div class="BlockForms-content">
      <div class="BlockForms-add">
        <span>添加地块</span>
      </div>
      <!-- <div class="BlockForms-qh">
        <div
          :class="qhshow == 1 ? 'BlockForms-qh-contents' : 'BlockForms-qh-content'"
          @click="qhClick(1)"
        >
          手动绘制
        </div> -->
      <!-- <div
          :class="qhshow == 2 ? 'BlockForms-qh-contents' : 'BlockForms-qh-content'"
          @click="qhClick(2)"
        >
          AI识别
        </div> -->
      <!-- </div> -->
      <a-spin :spinning="confirmLoading" class="BlockForms-forms">
        <j-form-container :disabled="formDisabled">
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col
                :span="24"
                style="display: flex; justify-content: space-between; font-size: 14px"
                v-if="qhshow == 2"
              >
                <span> 显示识别结果</span><a-switch default-checked @change="onChange" />
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="地块面积(亩)" prop="mh">
                  <a-input v-model="model.mj" :disabled="true"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="区域名称" prop="regionName">
                  <a-input v-model="model.regionName" ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="区域编码" prop="regionNo">
                  <a-input v-model="model.regionNo" placeholder="0/40"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="备注" prop="ps">
                  <a-input v-model="model.ps"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <div class="block-illustrate" v-if="qhshow == 2">
              <span>说明：</span>
              <span
                >1.AI
                地块识别需在高清地图上进行，如该区域无法进行识别，请确认该区域是否重建过高清地图</span
              >
              <span>2.如 AI 识别结果不准确，请选中地块后 点此上报</span>
            </div>
            <a-form-model-item>
              <a-button type="primary" @click="submitForm"> 提交 </a-button>
            </a-form-model-item>
          </a-form-model>
        </j-form-container>
      </a-spin>
    </div>
  </div>
</template>

<script>
import blockGis from "./modules/BlockGisModal";
import { httpAction, getAction } from "@/api/manage";

export default {
  name: "BlockForm",
  components: {
    blockGis,
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      blockList: [],
      isEdit: false,
      isShow: true,
      isEndEdit: false,
      qhshow: "1",
      blockHeight: document.documentElement.clientHeight + "px",
      model: {},
      confirmLoading: false,
      validatorRules: {
        name: [{ required: true, message: "请输入地块名称!" }],
        area: [{ required: true, message: "请输入地块面积!" }],
      },
      url: {
        add: "/wfim/wfimRegion/add",
        edit: "/wfim/wfimRegion/edit",
        queryById: "/app/block/queryById",
      },
    };
  },
  computed: {
    formDisabled() {
      return this.disabled;
    },
  },
  created() {
    //编辑
    if (this.$route.query.id) {
      this.model = this.$route.query;
      this.isEdit = true;
      this.isShow = false;
    }

    //接收list页面传递的地块数组数据
    // console.log(this.$route.query.list) // 输出
    // if(this.$route.query.list){
    //   setInterval(() => {
    //     this.blockList=this.$route.query.list;
    //   }, 1000)

    // }
  },
  mounted() {
    //使用$nextTick方法来确保在父组件和子组件都加载完成后再执行子组件的方法
    this.$nextTick(() => {
      //编辑
      if (this.model.id) {
        this.$refs.blockGisRef2.moveViewChild(this.model.zbxBh);
        this.$refs.blockGisRef2.addInteraction(this.model.zbxBh);
      }
    });
  },
  methods: {
    handleReceivedData(data) {
      // 处理从子组件接收的数据
      this.model = Object.assign({}, this.model, data); // 复制model对象的所有属性，并修改data里与model对应的属性的值
    },
    onChange(checked) {
      console.log(`a-switch to ${checked}`);
    },
    qhClick(val) {
      this.qhshow = val;
    },
    submitForm() {
      console.log(this.model);
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let httpurl = "";
          let method = "";
          if (!this.model.id) {
            httpurl += this.url.add;
            method = "post";
          } else {
            httpurl += this.url.edit;
            method = "put";
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.isEndEdit = true;
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style scoped>
.BlockForms {
  display: flex;
  background: #ffffff;
}
.BlockForms-gis {
  width: 100%;
}
.block-gis {
  position: relative;
}
.BlockForms-content {
  width: 400px;
  border-left: 1px solid #eee;
  box-sizing: border-box;
}
.BlockForms-forms {
  padding: 0px 16px;
}
.BlockForms-add {
  padding-left: 16px;
  height: 64px;
  line-height: 64px;
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
  font-weight: bold;
}
.BlockForms-qh {
  font-size: 14px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.BlockForms-qh-content {
  border: 1px solid #dcdfe6;
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.BlockForms-qh-contents {
  color: #fff;
  border-color: #189723;
  background-color: #189723;
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
.block-illustrate {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
</style>
<style>
.BlockForms .ant-input:placeholder-shown {
  text-align: right;
}
.BlockForms .ant-switch-checked {
  background-color: #189723;
}
.BlockForms .ant-btn-primary {
  background-color: #189723;
  border-color: #189723;
  width: 100%;
}
</style>
